<template>
  <view class="tag-container">
    <!-- 头部区域已去除，搜索框紧贴tab栏 -->
    <view class="search-area">
      <view class="search-box">
        <uni-icons class="search-icon" type="search" size="18" color="#bcbcbc" />
        <input class="search-input" v-model="searchText" placeholder="搜索标签" @input="handleSearch" @confirm="handleSearch" />
      </view>
    </view>
    <!-- 分组列表 -->
    <scroll-view class="content" scroll-y>
      <!-- 空状态 -->
      <view v-if="!systemGroups.length && !customGroups.length" class="empty-container">
        <text>暂无标签分组</text>
      </view>
      <!-- 原有分组渲染逻辑 -->
      <view v-else class="group-list">
        <!-- 系统标签分组 -->
        <view v-if="systemGroups.length > 0">
          <view class="group-section-title">系统标签分组</view>
          <view v-for="group in systemGroups" :key="group.id" class="group-item" :style="{ borderLeftColor: group.color || '#CCCCCC' }">
            <view class="group-header" @click="toggleGroup(group.id)">
              <view class="group-info">
                <uni-icons :type="group.expanded ? 'arrowdown' : 'arrowright'" size="16" color="#666"/>
                <text class="group-name">{{ group.groupName }}</text>
                <text class="tag-count">({{ group.tagList ? group.tagList.length : 0 }})</text>
              </view>
              <!-- 系统标签分组不显示编辑和删除按钮 -->
            </view>
            <view v-show="group.expanded" class="tags-container">
              <view v-for="tag in group.tagList" :key="tag.id" class="tag-item">
                <view class="tag-content" @click="handleAddContactToTag(tag)">
                  <view class="tag-color" :style="{ backgroundColor: tag.color || '#CCCCCC' }"/>
                  <text class="tag-name">{{ tag.tagName }}</text>
                  <text class="tag-usage">{{ tag.tagCount || 0 }}人</text>
                </view>
                <view class="tag-actions">
                  <view class="action-btn" @click.stop="handleAddContactToTag(tag, $event)">
                    <uni-icons type="plusempty" size="18" color="#666"/>
                  </view>
                  <view class="action-btn" @click.stop="handleEditTag(tag, $event)">
                    <uni-icons type="compose" size="18" color="#666"/>
                  </view>
                  <view class="action-btn" @click.stop="handleDeleteTag(tag, $event)">
                    <uni-icons type="trash" size="18" color="#666"/>
                  </view>
                </view>
              </view>
              <view class="add-tag-btn" @tap="handleCreateTag(group, $event)">添加标签</view>
            </view>
          </view>
        </view>
        <!-- 自定义标签分组 -->
        <view v-if="customGroups.length > 0">
          <view class="group-section-title">自定义标签分组</view>
          <view v-for="group in customGroups" :key="group.id" class="group-item" :style="{ borderLeftColor: group.color || '#CCCCCC' }">
            <view class="group-header" @click="toggleGroup(group.id)">
              <view class="group-info">
                <uni-icons :type="group.expanded ? 'arrowdown' : 'arrowright'" size="16" color="#666"/>
                <text class="group-name">{{ group.groupName }}</text>
                <text class="tag-count">({{ group.tagList ? group.tagList.length : 0 }})</text>
              </view>
              <view class="group-actions">
                <view class="action-btn" @click.stop="handleEditGroup(group, $event)">
                  <uni-icons type="compose" size="20" color="#666"/>
                </view>
                <view class="action-btn" @click.stop="handleDeleteGroup(group, $event)">
                  <uni-icons type="trash" size="20" color="#666"/>
                </view>
              </view>
            </view>
            <view v-show="group.expanded" class="tags-container">
              <view v-for="tag in group.tagList" :key="tag.id" class="tag-item">
                <view class="tag-content" @click="handleAddContactToTag(tag)">
                  <view class="tag-color" :style="{ backgroundColor: tag.color || '#CCCCCC' }"/>
                  <text class="tag-name">{{ tag.tagName }}</text>
                  <text class="tag-usage">{{ tag.tagCount || 0 }}人</text>
                </view>
                <view class="tag-actions">
                  <view class="action-btn" @click.stop="handleAddContactToTag(tag, $event)">
                    <uni-icons type="plusempty" size="18" color="#666"/>
                  </view>
                  <view class="action-btn" @click.stop="handleEditTag(tag, $event)">
                    <uni-icons type="compose" size="18" color="#666"/>
                  </view>
                  <view class="action-btn" @click.stop="handleDeleteTag(tag, $event)">
                    <uni-icons type="trash" size="18" color="#666"/>
                  </view>
                </view>
              </view>
              <view class="add-tag-btn" @tap="handleCreateTag(group, $event)">添加标签</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 分组编辑弹窗 -->
    <view v-if="showGroupPopup" class="popup-mask" @click="closeGroupPopup">
      <view class="popup-container" @click.stop>
        <view class="popup-content">
          <view class="popup-title">{{ editingGroup ? '编辑分组' : '新建分组' }}</view>
          <view class="form-item">
            <input
              type="text"
              v-model="groupForm.name"
              placeholder="请输入分组名称"
              class="popup-input"
            />
            <view class="color-picker">
              <text class="color-label">分组颜色：</text>
              <view class="colors-grid">
                <!-- 如果当前颜色不在预设列表中，先显示当前颜色 -->
                <view
                  v-if="groupForm.color && !colors.includes(groupForm.color)"
                  :class="['color-item', 'active']"
                  :style="{ backgroundColor: groupForm.color }"
                  @click="groupForm.color = groupForm.color"
                >
                  <view class="custom-color-label">当前</view>
                </view>
                <!-- 预设颜色列表 -->
                <view
                  v-for="color in colors"
                  :key="color"
                  :class="['color-item', { active: groupForm.color === color }]"
                  :style="{ backgroundColor: color }"
                  @click="groupForm.color = color"
                />
              </view>
            </view>
          </view>
          <view class="popup-buttons">
            <view class="cancel-btn" @tap="closeGroupPopup">取消</view>
            <view class="confirm-btn" @tap="confirmGroup">确定</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 标签编辑弹窗 -->
    <view v-if="showTagPopup" class="popup-mask" @click="closeTagPopup">
      <view class="popup-container" @click.stop>
        <view class="popup-content">
          <view class="popup-title">{{ editingTag ? '编辑标签' : '新建标签' }}</view>
          <view class="form-item">
            <input
              type="text"
              v-model="tagForm.name"
              placeholder="请输入标签名称"
              class="popup-input"
            />
            <view class="color-picker">
              <text class="color-label">标签颜色：</text>
              <view class="colors-grid">
                <!-- 如果当前颜色不在预设列表中，先显示当前颜色 -->
                <view
                  v-if="tagForm.color && !colors.includes(tagForm.color)"
                  :class="['color-item', 'active']"
                  :style="{ backgroundColor: tagForm.color }"
                  @click="tagForm.color = tagForm.color"
                >
                  <view class="custom-color-label">当前</view>
                </view>
                <!-- 预设颜色列表 -->
                <view
                  v-for="color in colors"
                  :key="color"
                  :class="['color-item', { active: tagForm.color === color }]"
                  :style="{ backgroundColor: color }"
                  @click="tagForm.color = color"
                />
              </view>
            </view>
          </view>
          <view class="popup-buttons">
            <view class="cancel-btn" @tap="closeTagPopup">取消</view>
            <view class="confirm-btn" @tap="confirmTag">确定</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 悬浮添加按钮 -->
    <view class="floating-btn" @tap="handleCreateGroup">
      <text class="btn-icon">+</text>
    </view>
  </view>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue';
import TagApi from '@/sheep/api/tag/tag.js';

export default {
  name: 'TagTab',
  setup() {
    // 分组数据
    const groups = ref([]);

    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#D4A5A5', '#9B59B6', '#F39C12', '#E74C3C'];
    const searchText = ref('');
    const showSearch = ref(false);
    const showGroupPopup = ref(false);
    const showTagPopup = ref(false);
    const editingGroup = ref(null);
    const editingTag = ref(null);
    const currentGroup = ref(null);

    const groupForm = reactive({
      name: '',
      color: colors[0]
    });

    const tagForm = reactive({
      name: '',
      color: colors[0]
    });

    // 过滤后的分组列表
    const filteredGroups = computed(() => {
      if (!searchText.value.trim()) {
        return groups.value;
      }
      const keyword = searchText.value.toLowerCase();
      return groups.value.filter(group => 
        group.groupName.toLowerCase().includes(keyword) ||
        (group.tagList && group.tagList.some(tag => tag.tagName.toLowerCase().includes(keyword)))
      );
    });
    // 新增：系统分组和自定义分组
    const systemGroups = computed(() => filteredGroups.value.filter(g => g.isSystem));
    const customGroups = computed(() => filteredGroups.value.filter(g => !g.isSystem));

    const toggleGroup = (groupId) => {
      const group = groups.value.find(g => g.id === groupId);
      if (group) {
        group.expanded = !group.expanded;
      }
    };

    const handleSearchClick = () => {
      showSearch.value = !showSearch.value;
      if (!showSearch.value) {
        // 关闭搜索时清空搜索内容
        searchText.value = '';
      }
    };

    // 处理搜索
    const handleSearch = () => {
      // 搜索逻辑由computed属性filteredGroups自动处理
      // 这里可以添加其他搜索相关的逻辑，如搜索统计等
    };

    // 查询标签分组列表
    const fetchTagGroupList = async () => {
      try {
        const res = await TagApi.queryTagGroupList({});
        if (res.code === 0 && res.data) {
          groups.value = res.data.map(group => ({
            ...group,
            expanded: false,
            tagList: group.tagList || []
          }));
        }
      } catch (error) {
        console.error('获取标签分组列表失败:', error);
        uni.showToast({
          title: '获取分组列表失败',
          icon: 'none'
        });
      }
    };

    const handleCreateGroup = () => {
      editingGroup.value = null;
      groupForm.name = '';
      groupForm.color = colors[0];
      showGroupPopup.value = true;
    };

    const handleEditGroup = (group, event) => {
      if (event) {
        event.stopPropagation();
      }
      editingGroup.value = group;
      groupForm.name = group.groupName;
      groupForm.color = group.color || colors[0];
      showGroupPopup.value = true;
    };

    const handleDeleteGroup = (group, event) => {
      if (event) {
        event.stopPropagation();
      }
      uni.showModal({
        title: '确认删除',
        content: `确定要删除分组"${group.groupName}"吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              const response = await TagApi.delTagGroup({
                groupId: group.id
              });
              if (response.code === 0) {
                groups.value = groups.value.filter(g => g.id !== group.id);
                uni.showToast({ title: '删除成功', icon: 'success' });
              } else {
                uni.showToast({ title: response.msg || '删除失败', icon: 'none' });
              }
            } catch (error) {
              console.error('删除分组失败:', error);
              uni.showToast({ title: '删除失败', icon: 'none' });
            }
          }
        }
      });
    };

    const handleCreateTag = (group, event) => {
      if (event) {
        event.stopPropagation();
      }
      editingTag.value = null;
      currentGroup.value = group;
      tagForm.name = '';
      tagForm.color = colors[0];
      showTagPopup.value = true;
    };

    const handleEditTag = (tag, event) => {
      if (event) {
        event.stopPropagation();
      }
      editingTag.value = { ...tag }; // 创建副本，包含完整的tag信息
      tagForm.name = tag.tagName;
      // 使用API返回的颜色，如果为空则使用默认颜色
      tagForm.color = tag.color || colors[0];
      showTagPopup.value = true;
    };

    const handleDeleteTag = (tag, event) => {
      if (event) {
        event.stopPropagation();
      }
      uni.showModal({
        title: '确认删除',
        content: `确定要删除标签"${tag.tagName}"吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              const response = await TagApi.delTag({
                id: tag.id
              });
              if (response.code === 0) {
                // 直接从当前分组的tagList中移除，无需刷新整个分组列表
                const group = groups.value.find(g => g.tagList && g.tagList.some(t => t.id === tag.id));
                if (group) {
                  group.tagList = group.tagList.filter(t => t.id !== tag.id);
                }
                uni.showToast({ title: '删除成功', icon: 'success' });
              } else {
                uni.showToast({ title: response.msg || '删除失败', icon: 'none' });
              }
            } catch (error) {
              console.error('删除标签失败:', error);
              uni.showToast({ title: '删除失败', icon: 'none' });
            }
          }
        }
      });
    };

    const confirmGroup = async () => {
      if (!groupForm.name.trim()) {
        uni.showToast({ title: '请输入分组名称', icon: 'none' });
        return;
      }

      try {
        const params = {
          groupId: editingGroup.value ? editingGroup.value.id : null,
          tagType: 'CUSTOM',
          groupName: groupForm.name,
          color: groupForm.color
        };

        const response = await TagApi.addOrUpdateTagGroup(params);
        if (response.code === 0) {
          if (editingGroup.value) {
            // 更新本地数据
            editingGroup.value.groupName = groupForm.name;
            editingGroup.value.color = groupForm.color;
            uni.showToast({ title: '修改成功', icon: 'success' });
          } else {
            // 重新获取分组列表以确保数据同步
            await fetchTagGroupList();
            uni.showToast({ title: '创建成功', icon: 'success' });
          }
          closeGroupPopup();
        } else {
          uni.showToast({ title: response.msg || '操作失败', icon: 'none' });
        }
      } catch (error) {
        console.error('操作分组失败:', error);
        uni.showToast({ title: '操作失败', icon: 'none' });
      }
    };

    const confirmTag = async () => {
      if (!tagForm.name.trim()) {
        uni.showToast({ title: '请输入标签名称', icon: 'none' });
        return;
      }

      try {
        const params = {
          id: editingTag.value ? editingTag.value.id : null,
          tagGroupId: currentGroup.value ? currentGroup.value.id : (editingTag.value ? editingTag.value.tagGroupId : null),
          tagName: tagForm.name,
          color: tagForm.color
        };

        const response = await TagApi.addOrUpdateTag(params);
        if (response.code === 0) {
          if (editingTag.value) {
            // 编辑标签，刷新整个分组列表
            await fetchTagGroupList();
            uni.showToast({ title: '修改成功', icon: 'success' });
          } else {
            // 新增标签，直接push到当前分组tagList，data为标签id
            if (currentGroup.value && response.data) {
              if (!currentGroup.value.tagList) currentGroup.value.tagList = [];
              const newTag = {
                id: response.data,
                tagName: tagForm.name,
                color: tagForm.color,
                tagCount: 0
              };
              currentGroup.value.tagList.push(newTag);
              // 不再自动跳转到标签联系人页面
            }
            uni.showToast({ title: '创建成功', icon: 'success' });
          }
          closeTagPopup();
        } else {
          uni.showToast({ title: response.msg || '操作失败', icon: 'none' });
        }
      } catch (error) {
        console.error('操作标签失败:', error);
        uni.showToast({ title: '操作失败', icon: 'none' });
      }
    };

    const closeGroupPopup = () => {
      showGroupPopup.value = false;
    };

    const closeTagPopup = () => {
      showTagPopup.value = false;
    };

    const handleAddContactToTag = (tag, event) => {
      if (event) {
        event.stopPropagation();
      }
      // 跳转到标签联系人列表页面
      uni.navigateTo({
        url: `/pages/contact/tag-contact-list?tagId=${tag.id}&tagName=${encodeURIComponent(tag.tagName)}&tagColor=${encodeURIComponent(tag.color || '#CCCCCC')}`
      });
    };

    // 组件挂载时获取数据
    onMounted(() => {
      fetchTagGroupList();
    });

    return {
      groups,
      filteredGroups,
      systemGroups,
      customGroups,
      colors,
      searchText,
      showSearch,
      showGroupPopup,
      showTagPopup,
      editingGroup,
      editingTag,
      currentGroup,
      groupForm,
      tagForm,
      toggleGroup,
      handleSearchClick,
      handleSearch,
      handleCreateGroup,
      handleEditGroup,
      handleDeleteGroup,
      handleCreateTag,
      handleEditTag,
      handleDeleteTag,
      confirmGroup,
      confirmTag,
      closeGroupPopup,
      closeTagPopup,
      fetchTagGroupList,
      handleAddContactToTag
    };
  }
};
</script>

<style lang="scss" scoped>
.tag-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #F8F8F8;
}

.header {
  padding: 30rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #FFFFFF;
}

.header-actions {
  display: flex;
  align-items: center;
}

.action-icon {
  margin-left: 30rpx;
  width: 22px;
  height: 22px;
}

.search-area {
  padding: 0;
  margin-top: 0;
  margin-bottom: 12rpx;
  background: #fff;
}
.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 0 16rpx;
  height: 40px;
  border-radius: 20px;
  margin: 0 16rpx;
}
.search-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  color: #bcbcbc;
}
.search-input {
  flex: 1;
  font-size: 15px;
  background: transparent;
  border: none;
  outline: none;
  color: #333;
  height: 40px;
  line-height: 40px;
}
::v-deep .search-input::placeholder {
  color: #bcbcbc;
  font-size: 15px;
}

.content {
  flex: 1;
  min-height: 0;
  height: 0;
  padding: 0;
  overflow: auto;
}

.empty-state {
  height: 400rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20rpx;

  .empty-text {
    color: #999999;
    font-size: 14px;
  }
}

.group-list {
  flex: 1;
  overflow: auto;
  padding: 0;
  gap: 20rpx;
  .group-item {
      background-color: #ffffff;
      border-radius: 0;
      overflow: hidden;
      box-shadow: 0 2rpx 12rpx rgba(43, 127, 243, 0.05);
      transition: all 0.3s ease;
      border-left: 8rpx solid;

      &:hover {
        transform: translateY(-2rpx);
        box-shadow: 0 8rpx 24rpx rgba(43, 127, 243, 0.12);
      }

    .group-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 28rpx 16rpx;
      border-bottom: 1px solid #f0f2f5;

      .group-info {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .group-name {
          font-size: 16px;
          color: #333333;
          font-weight: 500;
        }

        .tag-count {
          font-size: 14px;
          color: #999999;
        }
      }

      .group-actions {
        display: flex;
        gap: 24rpx;

        .action-btn {
          padding: 8rpx;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background-color 0.2s ease;

          &:active {
            background-color: rgba(0, 0, 0, 0.05);
          }
        }
      }
    }

    .tags-container {
      padding: 20rpx 0;

      .tag-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 16rpx;
        border-bottom: 1px solid #f0f2f5;

        &:last-child {
          border-bottom: none;
        }

        .tag-content {
          display: flex;
          align-items: center;
          gap: 20rpx;

          .tag-color {
            width: 28rpx;
            height: 28rpx;
            border-radius: 50%;
            box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
          }

          .tag-name {
            font-size: 14px;
            color: #333333;
            font-weight: 500;
          }

          .tag-usage {
            font-size: 12px;
            color: #999999;
          }
        }

        .tag-actions {
          display: flex;
          gap: 20rpx;
        }
        .tag-actions .action-btn:last-child {
          margin-right: 16rpx;
        }
        .tag-actions .action-btn:last-child uni-icons {
          color: #ff4757 !important;
        }
      }

      .add-tag-btn {
        display: inline-block;
        min-width: 100rpx;
        padding: 10rpx 20rpx;
        margin: 12rpx 0 0 16rpx;
        background: linear-gradient(135deg, #2B7FF3, #5A9CFF);
        color: #fff;
        font-size: 15px;
        font-weight: 400;
        border-radius: 8rpx;
        text-align: center;
        box-shadow: 0 2rpx 6rpx rgba(43, 127, 243, 0.18);
        transition: all 0.3s ease;
        user-select: none;
      }
      .add-tag-btn:active {
        opacity: 0.8;
      }
    }
  }
}

.group-section-title {
  font-size: 12px;
  color: #bcbcbc;
  margin: 0 0 8rpx 0;
  padding-left: 16rpx;
  background: #f5f5f5;
  line-height: 36rpx;
}

// 弹窗样式
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40rpx;

  .popup-container {
    background-color: #fff;
    border-radius: 16rpx;
    width: 90vw;
    max-width: 90vw;
    max-height: 80vh;
    overflow: hidden;

    .popup-content {
      padding: 30rpx 30rpx 20rpx;

      .popup-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        text-align: center;
        margin-bottom: 30rpx;
      }

      .form-item {
        margin-bottom: 30rpx;

        .popup-input {
          width: 100%;
          height: 80rpx;
          border: 1px solid #e8eaed;
          border-radius: 12rpx;
          padding: 0 24rpx;
          margin-bottom: 20rpx;
          font-size: 14px;
          background-color: #f8f9fa;
          transition: all 0.3s ease;
          box-sizing: border-box;

          &:focus {
            border-color: #2B7FF3;
            background-color: #ffffff;
            box-shadow: 0 0 0 2px rgba(43, 127, 243, 0.1);
          }
        }



        .color-picker {
          margin-top: 20rpx;

          .color-label {
            font-size: 14px;
            color: #666666;
            margin-bottom: 16rpx;
            display: block;
          }

          .colors-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 16rpx;

            .color-item {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              cursor: pointer;
              transition: all 0.2s ease;
              border: 2px solid transparent;
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;

              &.active {
                border-color: #333333;
                transform: scale(1.1);
              }

              .custom-color-label {
                font-size: 8px;
                color: #fff;
                text-shadow: 0 0 2px rgba(0,0,0,0.5);
                font-weight: bold;
              }
            }
          }
        }
      }

      .popup-buttons {
        display: flex;
        gap: 20rpx;
        margin-top: 30rpx;

        .cancel-btn {
          flex: 1;
          background-color: #f0f2f5;
          color: #666;
          border: none;
          border-radius: 12rpx;
        }

        .confirm-btn {
          flex: 1;
          background: linear-gradient(135deg, #2B7FF3, #5A9CFF);
          border: none;
          border-radius: 12rpx;
          box-shadow: 0 4rpx 12rpx rgba(43, 127, 243, 0.25);
        }
      }
    }
  }
}

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #8e8e93;
  font-size: 14px;
}
.add-btn {
  margin-top: 20px;
  background: linear-gradient(135deg, #2B7FF3, #5A9CFF);
  color: #fff;
  font-size: 14px;
  padding: 6px 20px;
  border-radius: 20px;
  border: none;
  box-shadow: 0 4px 12px rgba(43, 127, 243, 0.25);
  transition: all 0.3s ease;
}
.add-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(43, 127, 243, 0.4);
}
.floating-btn {
  position: fixed;
  right: 30rpx;
  bottom: 160rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #2B7FF3, #5A9CFF);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 20rpx rgba(43, 127, 243, 0.35);
  z-index: 100;
  transition: all 0.3s ease;
}
.btn-icon {
  color: #fff;
  font-size: 50rpx;
  font-weight: 300;
  text-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.floating-btn:active {
  transform: scale(0.9);
  box-shadow: 0 4rpx 16rpx rgba(43, 127, 243, 0.5);
}
</style> 